<template>
  <div class="article">
    <van-nav-bar
      title="文章"
      left-text="返回"
      :fixed="true"
      safe-area-inset-top="true"
      :border="true"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-tabs :before-change="beforeChange" swipeable sticky>
      <van-tab
        v-for="(item, index) in categoryOptions"
        :key="index"
        :title="item.name"
      >
        <div style="margin-top: 10px">
          <Content
            v-for="art in articleListObj[item.id]"
            :key="art.title"
            :article="art"
            :item="item"
          ></Content>
        </div>
        <div
          v-if="articleListObj[item.id] && articleListObj[item.id].length == 0"
          style="margin-top: 10px"
          class="noneImg"
        >
          <img class="none" src="./none.png" alt="" />
          <div class="van-list__finished-text">没有更多了</div>
        </div>
        <div v-else style="margin-top: 10px" class="noneImg">
          <div class="van-list__finished-text">没有更多了</div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { getEInquiryList } from '/@/api/expert/list'
import head from './head.png'
import { useArticle } from './article'
import Content from './content.vue'

export default defineComponent({
  components: { Content },
  setup() {
    const headPng = ref(head)
    const router = useRouter()
    const expertList: any[] = reactive([])
    getEInquiryList(1, 100, { state: 1 }).then((res) => {
      const data = res.data.data.records
      data.forEach((item: any[]) => {
        expertList.push(item)
      })
    })

    const { categoryOptions, loadTab, articleListObj, beforeChange } =
      useArticle()

    return {
      expertList,
      headPng,
      onClickLeft() {
        router.push({
          name: 'Home',
        })
      },
      categoryOptions,
      loadTab,
      articleListObj,
      beforeChange,
    }
  },
})
</script>

<style lang="less" scoped>
.prj img {
  border-radius: 5px;
}
.article {
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  padding-top: 45px;
  padding-bottom: 50px;

  /deep/ .van-tab {
    font-size: 15px;
  }

  /deep/ .van-tab--active {
    color: #0387cf;
  }

  /deep/ .van-tabs__line {
    display: none;
  }

  /deep/ .van-cell__title {
    font-size: 15px;
    color: #0387cf;
  }

  /deep/ .van-card__title {
    font-size: 13px;
    font-weight: bold;
  }
}

.noneImg {
  text-align: center;

  .none {
    width: 110px;
    margin-top: 23vh;
  }
}
</style>
